<template>
  <div>
    <h2>Game</h2>
    <!-- 
      动态路由：我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件
      动态路由主要是同个两种传参方式来实现的
        1.params传参
          - 直接在路由路径后面拼接参数，并且需要路由表中配合
          - 在路由表中还可以配置哪些参数是可选的
          - 我们 to 写成对象 也可以进行传递params参数
            * 注意：params参数只能和name配合使用，不能和path配合使用
            * 注意：params某个参数如果可选，则不能传递空字符串，可以写为null
     -->
    <router-link tag="strong" to="/home/game/item?id=001&title=lol"
      >LOL</router-link
    >
    <router-link
      tag="strong"
      :to="{
        path: '/home/game/item',
        query: {
          id: '002',
          title: 'CF',
        },
      }"
      >CF</router-link
    >
    <router-link
      tag="strong"
      :to="{
        name: 'GameItem',
        query: {
          id: '003',
        },
      }"
      >NZ</router-link
    >
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'Game',
  mounted() {
    console.log('Game-mounted');
  },
};
</script>
<style></style>
